<template>
  <div style="height: 520px; overflow-y: hidden" class="seismic_container">
    <div class="card-title">国内地震区域统计(近三个月)</div>
    <div v-for="(item, index) in xData" :key="index" class="earthquake">
      <span class="province"> {{ formatName(item) }}</span>
      <div class="bar-box">
        <span
          :class="['bar', formatLvl(yData[index])]"
          :style="`width:${(yData[index] * 160) / 100}px`"
        ></span>
      </div>
      <span class="count">{{ yData[index] }}</span>
    </div>
  </div>
</template>

<script lang="tsx" setup>
import { ref } from 'vue';
import dayjs from 'dayjs';
import { getStatisticsQuickReport } from '@/api/onlineStatistics';

const xData = ref([]);
const yData = ref({});

// 获取时间
const getDateRange = () => {
  // 获取当前时间
  const today = dayjs();
  // 近三月的起止时间
  const last3MonthsStart = today.clone().subtract(3, 'month').startOf('month');
  const last3MonthsEnd = today.clone().subtract(1, 'month').endOf('month');
  const last3MonthsRange = [
    last3MonthsStart.valueOf(),
    last3MonthsEnd.valueOf(),
  ];
  // 返回日期范围
  return last3MonthsRange;
};

// 获取地震区域统计数据
const getStatisticsQuickReportFn = async () => {
  const res: any = await getStatisticsQuickReport({
    startTime: getDateRange()[0],
    endTime: getDateRange()[1],
    type: '1',
  });
  console.log(res, 'res');

  if (res.code == 200) {
    yData.value = res.data.yData;
    xData.value = res.data.xData;
  }
};
getStatisticsQuickReportFn();
//省份格式化
const formatName = (val: any) => {
  if (val.indexOf('自治区') != -1) {
    return val.replace('自治区', '').length > 3
      ? val.substring(0, 2)
      : val.replace('自治区', '');
  } else if (val.indexOf('省') != -1) {
    return val.replace('省', '');
  } else if (val.indexOf('海域') !== -1) {
    return val.substring(0, 2) + val.substring(val.length - 2, val.length);
  } else {
    return val;
  }
};
// 地震柱状颜色显示格式化
const formatLvl = (val: any) => {
  if (val > 150) {
    return 'red';
  } else if (val <= 150 && val > 100) {
    return 'orange';
  } else if (val <= 100 && val > 50) {
    return 'yellow';
  } else {
    return 'blue';
  }
};
</script>

<style lang="scss" scoped>
@use '../style.scss';
</style>
